Los detalles de Jose a secas siempre vienen en zip, y vienen así porque son fuentes para descargar e instalarlas en nuestro PC. - Sitio tripwire Magazine
Lightheaded |
|
▼ |
Efecto esquina doblada en los post con CSS |
|
▼ |
En la entrada anterior vimos la forma de añadir un efecto esquina doblada con CSS, me preguntaba Enrique si había forma de aplicar ese mismo efecto como fondo de los post y el resultado es una forma original de mostrar nuestras entradas.
En plantilla edición de HTML podemos encontrar algo así:.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
Es el sitio indicado para añadir una imagen de fondo o color en los post y en este caso el efecto de esquina doblada, tendremos que eliminar lo anterior y en su lugar añadimos:
.post {
background:#ccc;/* color del post */
color: #333; /* color del texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 580px; /* ancho del post*/
}
.post:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 40px 40px 0;
border-style:solid;
border-color:#fff #fff #333 #000;/* color borde y pestaña */
background:658E15;
/* sombra pestaña opcional*/
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}
En vista previa ya podemos ver el resultado, si deseamos usar nuestros propios colores sólo debemos sustituirlos, para facilitar la tarea en el mismo código está indicado el lugar para hacerlo.
Efecto esquina doblada con CSS |
|
▼ |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Nicolas Gallagher nos muestra la forma de crear un efecto esquina doblada con CSS, la forma de crearlo es muy sencilla, en una entrada o gadger de HTML incluimos lo siguiente.
<div class="note"><p>Texto</p></div>
En plantilla edición de HTML añadimos los estilos justo antes de ]]></b:skin> el resto trata de sustituir el color de fondo si se desea para ello está indicado el lugar en el mismo código así como el ancho, el color de la esquina y borde.
.note {
background: none repeat scroll 0 0 #97C02F; /* color de fondo */
color: #FFFFFF; /* color de texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 480px; /* ancho */
}
.note:before {
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
background: none repeat scroll 0 0 #658E15; /* color esquina */
border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de borde */
border-style: solid;
border-width: 0 16px 16px 0;
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
<div class="note blue"><p>Texto</p></div>
.note.blue {
background: none repeat scroll 0 0 #53A3B4; /* color de fondo */
color: #FFFFFF; /* color de texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 480px; /* ancho */
}
.note.blue:before {
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
background: none repeat scroll 0 0 #658E15; /* color de fondo */
border-color: #FFFFFF #FFFFFF #658E15 #658E15; /* color de esquina */
border-style: solid;
border-width: 0 16px 16px 0;
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
<div class="note taupe"><p>Texto</p></div>
.note.taupe {
background: none repeat scroll 0 0 #999868; /* color de fondo */
color: #FFFFFF; /* color de texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 480px; /* ancho */
}
.note.taupe:before {
background: none repeat scroll 0 0 #BDBB8B; /* color de esquina */
border-color: #FFFFFF #FFFFFF #BDBB8B #BDBB8B; /* color de borde */
border-style: solid;
border-width: 0 16px 16px 0;
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
}
Si queremos darle nuestro toque especial podemos añadir en lugar de color de fondo una textura con background: url(url-imagen) repeat scroll 0 0;
En su interior también podemos añadir alguna imagen con <img src="url-de-la-imagen">
La altura se irá adaptando a lo incluido en el contenido y la anchura a la establecida en width.
Añadimos sombra al texto con text-shadow: 1px 1px 1px #000;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
.note-fondo {
background: url(url-imagen) repeat scroll 0 0 #3A7F2A;
color: #FFFFFF; /* color de texto */
text-shadow: 1px 1px 1px #000;
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 480px; /* ancho */
}
.note-fondo:before {
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
background: none repeat scroll 0 0 #ADF96E; /* color esquina */
border-color: #FFFFFF #FFFFFF #ADF96E #ADF96E; /* color de borde */
border-style: solid;
border-width: 0 36px 36px 0;
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
}
Otorgar privilegios de autor y administrador |
|
▼ |
Si alguna vez nos vemos en la situación de invitar a alguien a participar en nuestro blog lo podemos hacer dando poderes de "autor" accediendo a Configuración/Permisos y en "Añadir autores" se añadirá la cuenta de correo del nuevo autor.
El nuevo autor recibirá una invitación en su bandeja de correo, si accedemos desde el enlace que nos proporciona ese correo encontraremos una especie de formulario donde añadiremos nuestro mail y contraseña.
Una vez realizado este paso el nuevo autor comprobará que en escritorio se ha añadido ese nuevo blog al que fuimos invitados y que aparece en nuestro perfil.
El nuevo autor tendrá permiso para escribir nuevas entradas o editar entradas antiguas sin ningún problema pero no tendrá acceso a la configuración y por lo tanto tampoco a la plantilla.
Un blog puede tener hasta 100 autores que pueden ser también administradores.
Para tener acceso a la plantilla, es necesario ser Administrador. Podemos dar privilegios de Administrador de la misma forma que dimos de autor Configuración/Permisos pero esta vez no será necesario añadir el mail porque ya lo tenemos será suficiente marcando sobre el enlace que dice "Otorgar privilegios de administrador"
Si por cualquier circunstancia en algún momento deseamos eliminar los poderes de autor o admistrador será suficiente con marcar el enlace de "Anular los privilegios de administrador" automáticamente el usuario eliminado pierde el dominio sobre el blog.
Es por ese motivo que hay que tomar precauciones cuando damos poderes de administrador porque cualquier administrador tiene poder para controlar, hacer y deshacer a su antojo incluso para suprimir al verdadero administrador del blog.
Cuánto vale tu cuenta en Twitter |
|
▼ |
No recuerdo el sitio pero había una página que nos proporcionaba el valor aproximado de nuestro blog, siempre he pensado que el valor que cualquier aplicación pueda darnos estará muy por debajo del que le damos nosotros si es que somos capaces de ponerle un precio.
tweetyam es una aplicación que tiene en cuenta el número de tweets, la cantidad de seguidores y la cantidad de seguidores de nuestros seguidores y basándose en esos datos nos descubre cuánto vale nuestra cuenta en Twitter.
Según se desprende en estos momentos mi cuenta tiene un valor de 1,113.74€ esperaba mucho menos dada la poca actividad que tengo en Twitter pero no se pierdan el siguiente dato, añadí el nombre de usuario en Twitter de nuestro famoso y gran amigo @TwittBoy y de resultado arrojó un valor de 18,281.18 €.
No sé si serán útiles esos datos pero si que son curiosos.REFERENCIA: Puertopixel
Brushes - Texturas |
|
▼ |
Saber las fuentes que tenemos en el PC |
|
▼ |
wordmark.it es una página como bien dice Oloman muy práctica yo añadiría que curiosa sobre todo cuando tenemos gran debilidad por las fuentes como es mi caso.
Utilizarla es tan sencillo como acceder a la página y presionar sobre el botón "load fonts" (carga de fuentes) inmediatamente nos muestra todas las fuentes que tenemos instaladas en el PC.
Si aún te estás preguntando para qué puede ser útil debe ser porque tienes pocas fuentes instaladas y te resultada fácil recordarlas
Entendiendo a su manera |
|
▼ |
Gradients de fondo con Css3 |
|
▼ |
En Net Tuts nos explican la forma de añadir degradados con Css3 o lo que es lo mismo gradients y al mismo tiempo conseguir que main y sidebar tengan la misma altura. Esto último es algo que todos intentamos conseguir cuando el color de fondo es distinto entre ambas columnas.
Para los ejemplos utilicé como siempre la plantilla Minima con su ancho habitual de width: 660px
Se añadió color de fondo en outer-wrapper y como vemos nuestro fondo adquirió dos tonos distintos de forma que cada uno ocupa el espacio correspondiente a main y sidebar.
#outer-wrapper {
background: -webkit-gradient(linear, left top, rightright top, from(turquoise), color-stop(.65, turquoise), color-stop(.35, tomato));
background: -moz-linear-gradient(left, turquoise 65%, tomato 35%);
......
......
}
Lo que haremos será jugar con el valor de los colores y utilizando el vista previa conseguimos un efecto de nuestro agrado.
background: -moz-linear-gradient(left, turquoise 35%, tomato 75%);
background: -webkit-gradient(linear, left top, rightright top, from(turquoise), color-stop(.35, turquoise), color-stop(.75, tomato));
......
......
}
Se puede ir probando con distintos resultados, pero hay que tener presente que al tratarse de Css3 no visualizaremos cambio alguno con Explorer.
background: -moz-linear-gradient(left, turquoise 5%, tomato 125%);
background: -webkit-gradient(linear, left top, rightright top, from(turquoise), color-stop(.5, turquoise), color-stop(.125, tomato));